<template>
	<view :class="[primarySize()]">
		<view class="page-foot">
			<Footer :identity="1" :footState="3" :num="megNum"></Footer>
		</view>
		<view class="container bg-white">
			<view class="page-head flex-box">
				<scroll-view class="news_tab" scroll-x>
					<view class="item" :class="[status == 0 ? 'active' : '']" @click="changeTab(0)">面试待同意<text
							v-if="tabNumber.tab_0>0">{{tabNumber.tab_0}}</text></view>
					<view class="item" :class="[status == 1 ? 'active' : '']" @click="changeTab(1)">面试拒绝<text
							v-if="tabNumber.tab_1>0">{{tabNumber.tab_1}}</text></view>
					<view class="item" :class="[status == 2 ? 'active' : '']" @click="changeTab(2)">面试中<text
							v-if="tabNumber.tab_2>0">{{tabNumber.tab_2}}</text></view>
					<view class="item" :class="[status == 4 ? 'active' : '']" @click="changeTab(4)">录用<text
							v-if="tabNumber.tab_4>0">{{tabNumber.tab_4}}</text></view>
					<view class="item" :class="[status == 3 ? 'active' : '']" @click="changeTab(3)">不合适<text
							v-if="tabNumber.tab_3>0">{{tabNumber.tab_3}}</text></view>
				</scroll-view>
			</view>
			<view class="pt88 plr30 pb30">
				<view class="pt30"></view>
				<view class="business_item" v-for="(interview,index) in interviews"
					@click="job_detail(interview.job_id)">
					<view class="recom_info">
						<view class="flex-box">
							<view class="business_img">
								<image mode="aspectFit"
									:src="cdnurl(interview.enterpriseinfo.logo)||'/static/public/business_logo.png'">
								</image>
							</view>
							<view class="flex-grow-1 business_info">
								<view class="flex-box">
									<view class="fs32 col0 fwb flex-grow-1 m-ellipsis pr30">{{interview.job.job_name}}
									</view>
									<view>{{formatDatetime(interview.createtime,'mm月dd日')}}</view>
								</view>
								<view class="flex-box">
									<view class="flex-grow-1">
										<view class="ptb10">{{interview.job.city.shortname}} ｜
											{{interview.enterpriseinfo.full_name||interview.enterpriseinfo.company_name}}
										</view>
										<view class="price">{{interview.job.salary_text}}</view>
									</view>
									<block v-if="interview.status==0">
										<button hover-class="none" @click.stop="bindRejectInterview(index)"
											class="refuse_btn">拒绝</button>
										<button hover-class="none" @click.stop="bindAcceptInterview(index)"
											class="agree_btn ml10">同意</button>
									</block>
									<block v-else>
										<button hover-class="none" v-if="interview.status==1"
											class="refuse_btn">已拒绝</button>
										<button hover-class="none" v-else class="agree_btn ml10">已同意</button>
									</block>
								</view>
							</view>
						</view>
						<view class="flex-box">
							<view></view>
						</view>
					</view>
					<view class="ptb15">
						<view class="flex-box invite_item">
							<view>面试时间</view>
							<view class="flex-grow-1">{{formatDatetime(interview.interview_time,'yyyy-mm-dd hh:ii')}}
							</view>
						</view>
						<view class="flex-box invite_item">
							<view>联系人</view>
							<view class="flex-grow-1">{{interview.contact}}</view>
						</view>
						<view class="flex-box invite_item">
							<view>联系电话</view>
							<view class="flex-grow-1">{{interview.contact_phone}}</view>
						</view>
						<view class="flex-box invite_item">
							<view>面试地址</view>
							<view class="flex-grow-1">{{interview.address}}</view>
							<view @click.stop="bindShowMap(index)">查看地图</view>
						</view>
						<view class="flex-box invite_item">
							<view>备注</view>
							<view class="flex-grow-1">
								<view style="width:auto;">{{interview.notice}}</view>
							</view>
						</view>
					</view>
				</view>
				<template v-if="userinfo">
					<view class="nothing" v-if="interviewsMore.nothing">
						<image class="img_nothing" src="/static/public/icon_nothing.png" mode="aspectFill"></image>
						<text>暂无面试</text>
					</view>

					<button @click="fetch" v-else hover-class="none"
						class="more_btn mt30">{{interviewsMore.text}}</button>
				</template>
				<template v-else>
					<view class="nothing1" @click="bindLogin()">
						<text class="col-gray">您的账号还未登录，</text>
						<text class="col2">去登录></text>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {

				tabNumber: {
					tab_0: 0,
					tab_1: 0,
					tab_2: 0,
					tab_3: 0,
					tab_4: 0
				},
				status: 0,
				userinfo: null,
				interviews: [],
				interviewsMore: {
					page: 1
				},
				megNum: 0,
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {
			this.userinfo = this.$core.getUserinfo();
			if (this.userinfo) {
				this.tabCount();
				this.fetch();
			}
			if (app.globalData.chat_config.SocketTask) {
				this.$chatIM.setMessageBadge(false)
			}
			uni.$on(app.globalData.Events.UserLogin, this.eventOnUserLogin, this);
			uni.$on(app.globalData.Events.UserLogout, this.eventOnUserLogout, this);
			uni.$on(app.globalData.Events.WebsocketMessageCount, this.eventWebsocketMessageCount);
		},
		onUnload() {
			uni.$off(app.globalData.Events.UserLogin, this.eventOnUserLogin);
			uni.$off(app.globalData.Events.UserLogout, this.eventOnUserLogout);
			uni.$off(app.globalData.Events.WebsocketMessageCount, this.eventWebsocketMessageCount);
		},
		onReachBottom() {
			this.fetch();
		},
		onPullDownRefresh() {
			this.refresh();
			uni.stopPullDownRefresh();
		},
		methods: {
			bindLogin() {
				this.$core.getUserinfo(true);
			},
			changeTab(index) {
				this.status = index
				this.refresh();
			},
			refresh: function() {
				this.interviews = [];
				this.interviewsMore = {
					page: 1
				};
				this.tabCount();
				this.fetch();
			},

			job_detail(id) {
				uni.navigateTo({
					url: '/pages/user/post_info?id=' + id
				})
			},

			bindShowMap(index) {
				let interview = this.interviews[index].job.city;
				console.log(this.interviews[index]);
				if (interview.lat) {
					uni.openLocation({
						latitude: Number(interview.lat),
						longitude: Number(interview.lng),
						address: interview.address
					})
				} else {
					interview.lat = null;
					uni.showToast({
						title: '无效地址,无法打开地图',
						icon: 'none'
					});
				}

			},
			fetch() {
				var status = this.status;
				this.$util.fetch(this, '/xilujob.job_interview/personal_list', {
					status: status
				}, 'interviewsMore', 'interviews', '');
			},
			bindRejectInterview(index) {
				let interview = this.interviews[index];
				uni.showModal({
					title: '提示',
					content: '确认拒绝面试？',
					success: res => {
						if (res.confirm) {
							this.$core.post({
								url: 'xilujob.job_interview/multi_status/interview_id/' + interview.id,
								data: {
									status: 1
								},
								success: ret => {

									this.refresh();
								}
							});
						}
					}
				})
			},
			bindAcceptInterview(index) {
				let interview = this.interviews[index];
				uni.showModal({
					title: '提示',
					content: '确认接受面试？',
					success: res => {
						if (res.confirm) {
							this.$core.post({
								url: 'xilujob.job_interview/multi_status/interview_id/' + interview.id,
								data: {
									status: 2
								},
								success: ret => {
									this.refresh();

								}
							});
						}
					}
				})
			},
			bindFailInterview(index) {
				let page = this;
				let interview = this.interviews[index];
				uni.showModal({
					title: '提示',
					content: '确认面试不合格？',
					success: res => {
						if (res.confirm) {
							page.$core.post({
								url: 'xilujob.job_interview/multi_status/interview_id/' + interview.id,
								data: {
									status: 3
								},
								success: ret => {
									page.interviews[index].status = ret.data.status;
								}
							});
						}
					}
				})
			},
			bindPassInterview(index) {
				let page = this;
				let interview = this.interviews[index];
				uni.showModal({
					title: '提示',
					content: '确认面试录取？',
					success: res => {
						if (res.confirm) {
							page.$core.post({
								url: 'xilujob.job_interview/multi_status/interview_id/' + interview.id,
								data: {
									status: 4
								},
								success: ret => {
									page.interviews[index].status = ret.data.status;
								}
							});
						}
					}
				})
			},
			//未读消息
			eventWebsocketMessageCount(data) {
				this.megNum = this.userinfo ? app.globalData.chat_config.messageCount : 0;
				// this.$forceUpdate()
			},

			tabCount() {
				var page = this;
				this.$core.get({
					url: '/xilujob.job_interview/personal_list_count',
					success(ret, response) {
						page.tabNumber = ret.data
					}
				});
			},
			eventOnUserLogin(userinfo) {
				this.userinfo = userinfo;
				if (this.userinfo.group_id == 1) {
					this.refresh();
				}
			},
			eventOnUserLogout() {
				this.userinfo = null;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pt88 {
		padding-top: 88rpx;
	}



	.page-head {
		height: 88rpx;
		background: #FFFFFF;
		border-bottom: 1px solid #eee;
	}

	.business_item {
		box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
		background-color: #fff;
		border-radius: 4rpx;
		border: 1rpx solid #EBEBEB;
		padding: 35rpx 30rpx 10rpx;
		position: relative;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.business_img {
		width: 80rpx;
		height: 80rpx;
		margin-right: 32rpx;
		margin-left: 20rpx;
	}

	.business_img image {
		width: 100%;
		height: 100%;
		display: block
	}

	.business_info {
		font-size: 24rpx;
		color: #333
	}

	.cancel_star {
		font-size: 20rpx;
		color: #999;
		line-height: 39rpx;
		height: 39rpx;
		border-radius: 8rpx;
		border: 1rpx solid #E1E1E1;
		padding: 0 15rpx;
		float: left;
		margin-bottom: 13rpx;
		margin-right: 26rpx;
	}

	.star_type {
		float: left;
		font-size: 20rpx;
		color: #999;
		border-radius: 8rpx;
		line-height: 39rpx;
		height: 39rpx;
		padding: 0 17rpx;
		background-color: #F7F7F7;
		border: 1rpx solid #F7F7F7;
		margin-right: 13rpx;
		margin-bottom: 13rpx;
	}

	.price {
		font-size: 28rpx;
		color: #f21b23;
		font-weight: bold
	}

	.refuse_btn {
		color: #999999;
		border: 1px solid #999999;
		font-size: 24rpx;
		padding: 0 24rpx;
		border-radius: 24rpx;
		height: 44rpx;
		line-height: 42rpx;
	}

	.agree_btn {
		color: var(--primary);
		border: 1px solid var(--primary);
		font-size: 24rpx;
		padding: 0 24rpx;
		border-radius: 24rpx;
		height: 44rpx;
		line-height: 42rpx;
	}

	.recom_info {
		border-bottom: 1rpx solid #E3E3E3;
		padding-bottom: 35rpx;
	}

	.invite_item {
		line-height: 60rpx;
		font-size: 28rpx;
	}

	.invite_item view {
		align-self: flex-start
	}

	.invite_item view:nth-child(1) {
		width: 140rpx;
	}

	.invite_item view:nth-child(2) {
		color: #878787
	}

	.invite_item view:nth-child(3) {
		color: var(--primary)
	}

	.news_tab {
		padding: 0 10rpx;
		height: 88rpx;
		border-bottom: 1px solid #EEEEEE;
		overflow-x: scroll;
		white-space: nowrap;
	}

	.news_tab .item {
		position: relative;
		padding: 0 20rpx;
		display: inline-block;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 30rpx;
		color: #333;
	}

	.news_tab .item.active::after {
		position: absolute;
		bottom: 8rpx;
		left: 50%;
		transform: translateX(-50%);
		content: '';
		width: 25rpx;
		height: 4rpx;
		background: var(--primary);
		border-radius: 2rpx;
	}

	.news_tab text {
		position: absolute;
		right: -8rpx;
		top: 12rpx;
		font-size: 22rpx;
		color: #FFF;
		width: 35rpx;
		height: 35rpx;
		background-color: var(--primary);
		line-height: 35rpx;
		text-align: center;
		border-radius: 50%;
	}

	.nothing1 {
		text-align: center;
		margin-top: 80rpx;
	}

	.nothing1 text {
		margin-top: 20rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 26rpx;
	}
</style>